<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>壹云盘后台管理系统</title>
<style type="text/css">
	#box{
		position: relative;
		width: 300px;
		height: 40px;
		margin: 10px auto 0;
		background-color: #e8e8e8;
		box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
	}
	.bgColor{
		position: absolute;
		left:0;
		top:0;
		width:40px;
		height: 40px;
		background-color: lightblue;
	}
	.txt{
		position: absolute;
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		color: #000;
		text-align: center;
	}
	.slider{
		position: absolute;
		left:0;
		top:0;
		width: 50px;
		height: 38px;
		border: 1px solid #ccc;
		background: #fff;
		text-align: center;
		cursor: pointer;
	}
	.slider>i{
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	.slider.active>i{
		color:green;
	}
</style>
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link rel="stylesheet" type="text/css" href="css/body.css"/>

<script type="text/javascript" src="js/jquery-1.11.3.js">

</script>

</head>
<body>
<div class="container">
	<section id="content">
		<form id="frm">
			<h1>壹云盘后台管理系统</h1>
			<div>
				<input type="text" placeholder="用户名" required id="username" />
			</div>
			<div>
				<input type="password" placeholder="密码" required id="password" />
			</div>
			<div id="box" onselectstart="return false;" style="width: 338px">
				<div class="bgColor"></div>
				<div class="txt" >滑动解锁</div>
				<!--给i标签添加上相应字体图标的类名即可-->
				<div class="slider"><i class="iconfont icon-double-right"></i></div>
			</div>

			<div class="">
				<span class="help-block u-errormessage" id="js-server-helpinfo">&nbsp;</span>
			 </div>
			<div>
				<!-- <input type="submit" value="Log in" /> -->
				<input type="button" value="登录" class="btn btn-primary" id="js-btn-login" disabled/>
			</div>
		</form><!-- form -->
	</section><!-- content -->
</div>
<!-- container -->

<br><br><br><br>

<script>
	$("#js-btn-login").click(function () {
		var username = $("#username").val();
		var password = $("#password").val();
		$.ajax({
			type:"post",
			url:"login",
			dataType:"json",
			data:{"username":username,"password":password},
			success:function (data) {
				console.log(data);
				if (data.code==0){  //登录成功
					//跳转到管理人员后台
					window.location.href="http://localhost:8000/admin/layuiAdmin/layuiAdmin.pro-v1.2.1/start/index.html";
				}else{   //登录失败，给与客户提示
					var message = data.message;
					console.log(message);
					$("#username").val("").attr("placeholder",message);
				}
			}
		})
	});

</script>

<!--滑块验证js事件-->
<script>
	//一、定义了一个获取元素的方法
	function getEle(selector){
		return document.querySelector(selector);
	}
	//二、获取到需要用到的DOM元素
	var box = getEle("#box"),//容器
			bgColor = getEle(".bgColor"),//背景色
			txt = getEle(".txt"),//文本
			slider = getEle(".slider"),//滑块
			icon = getEle(".slider>i"),
			successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离
			downX,//用于存放鼠标按下时的位置
			isSuccess = false;//是否解锁成功的标志，默认不成功

	//三、给滑块添加鼠标按下事件
	slider.onmousedown = mousedownHandler;

	//3.1鼠标按下事件的方法实现
	function mousedownHandler(e){
		bgColor.style.transition = "";
		slider.style.transition = "";
		var e = e || window.event || e.which;
		downX = e.clientX;
		//在鼠标按下时，分别给鼠标添加移动和松开事件
		document.onmousemove = mousemoveHandler;
		document.onmouseup = mouseupHandler;
	};

	//四、定义一个获取鼠标当前需要移动多少距离的方法
	function getOffsetX(offset,min,max){
		if(offset < min){
			offset = min;
		}else if(offset > max){
			offset = max;
		}
		return offset;
	}

	//3.1.1鼠标移动事件的方法实现
	function mousemoveHandler(e){
		var e = e || window.event || e.which;
		var moveX = e.clientX;
		var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);
		bgColor.style.width = offsetX + "px";
		slider.style.left = offsetX + "px";

		if(offsetX == successMoveDistance){
			success();
		}
		//如果不设置滑块滑动时会出现问题
		e.preventDefault();
	};

	//3.1.2鼠标松开事件的方法实现
	function mouseupHandler(e){
		if(!isSuccess){
			bgColor.style.width = 0 + "px";
			slider.style.left = 0 + "px";
			bgColor.style.transition = "width 0.8s linear";
			slider.style.transition = "left 0.8s linear";
		}
		document.onmousemove = null;
		document.onmouseup = null;
	};

	//五、定义一个滑块解锁成功的方法
	function success(){
		isSuccess = true;
		txt.innerHTML = "解锁成功";
		bgColor.style.backgroundColor ="lightgreen";
		slider.className = "slider active";
		icon.className = "iconfont icon-xuanzhong";
		//滑动成功时，移除鼠标按下事件和鼠标移动事件
		slider.onmousedown = null;
		document.onmousemove = null;
		//解锁成功的时候，将登录按钮变得可点击
		$("#js-btn-login").attr("disabled",false);
	};

</script>

</body>
</html>